import Taro, { Component, useState, useEffect } from '@tarojs/taro';
import { View, Input, Image, Picker } from '@tarojs/components';
import Address from '../../../components/address';
import Agentress from '../../../components/agentress';

import Next from '../../../static/user/icon_next.png';
import NavigationBar from '../../../components/navigationBar/index';

import { agentInfoCreate, agentInfoEdit, agentInfoDetail } from '../../../services/user'

import './index.scss';

const formList = [
  'mobile',
  'real_name',
  'launch_province_name',
  'province_name',
  'launch_city_name',
  'city_name',
  'launch_region_name',
  'region_name',
]


function Apply() {

  const userInfo = Taro.getStorageSync('userInfo');

  const [form, setForm] = useState({});
  const [list, setList] = useState([]);
  const [isSelected, setIsSelected] = useState(false);
  const [isSelecteds, setIsSelecteds] = useState(false);
  const [type, setType] = useState('');

  let navigationBarHeight = Taro.getStorageSync('navigationBarHeight');


  function handleText(key, e) {
    const value = {
      ...form,
    }
    value[key] = e.target.value;
    setForm(value);
  }

  useEffect(() => {
    setType(this.$router.params.type)
    agentInfoDetail().then(ele => {
      if (ele) {
        setForm(ele)
      }
    })
    console.log(form)
  }, []);
  function handleSubmit() {
    try {
      formList.forEach(res => {
        if (!form[res]) {
          Taro.showToast({
            title: '请填写信息',
            icon: 'none'
          })
          throw (new Error('The message'));
        }
      })
    } catch (error) {
      return false;
    }
    var obj = {
      mobile: form.mobile,
      real_name: form.real_name,
      launch_province_name: form.launch_province_name,
      province_name: form.province_name,
      launch_city_name: form.launch_city_name,
      city_name: form.city_name,
      launch_region_name: form.launch_region_name,
      region_name: form.region_name,
      type: form.type
    }
    agentInfoEdit(obj).then(ele => {
      Taro.showToast({
        title: '修改成功',
        icon: 'none'
      })
      setTimeout(() => {
        Taro.redirectTo({      //token失效，界面重定向到登录页,绝对路劲
          url: '/subPacKagebWork/pages/agentremarks/index',
        });
      }, 1000);

    })
  }
  function handlecreate() {
    try {
      formList.forEach(res => {
        if (!form[res]) {
          Taro.showToast({
            title: '请填写信息',
            icon: 'none'
          })
          throw (new Error('The message'));
        }
      })
    } catch (error) {
      return false;
    }
    var obj = {
      mobile: form.mobile,
      real_name: form.real_name,
      launch_province_name: form.launch_province_name,
      province_name: form.province_name,
      launch_city_name: form.launch_city_name,
      city_name: form.city_name,
      launch_region_name: form.launch_region_name,
      region_name: form.region_name,
      type: form.type
    }
    agentInfoCreate(obj).then(ele => {
      Taro.showToast({
        title: '创建成功',
        icon: 'none'
      })
      setTimeout(() => {
        Taro.redirectTo({      //token失效，界面重定向到登录页,绝对路劲
          url: '/subPacKagebWork/pages/agentremarks/index',
        });
      }, 1000);
    })
  }

  function closeItem(data) {
    console.log(data)
    setForm({
      ...form,
      ...data
    });
    setIsSelected(false);
  }
  function closeItems(data) {
    setForm({
      ...form,
      ...data
    });
    setIsSelecteds(false);
  }
  return (
    <View className='apply' style={`margin-top: ${navigationBarHeight}`}>
      <NavigationBar text="" />
      {form ? (
        <View className="box">
          <View className="from-item">
            <View className="label">手机号</View>
            <View className="space"></View>
            <Input onInput={(e) => handleText('mobile', e)} placeholder-class="phcolor" value={form.mobile} placeholder="请输入手机号" />
            <Image src={Next} className='next' />
          </View>
          <View className="from-item">
            <View className="label">用户真实姓名</View>
            <View className="space"></View>
            <Input onInput={(e) => handleText('real_name', e)} placeholder-class="phcolor" value={form.real_name} placeholder="请输入用户真实姓名" />
            <Image src={Next} className='next' />
          </View>
          <View className="from-item">
            <View className="label">所在地区</View>
            <View className="space"></View>
            <View className="tip" onClick={() => setIsSelected(true)}>
              {
                form.launch_province_name ? `${form.launch_province_name}${form.launch_city_name || ''}${form.launch_region_name || ''}` : '请选择所在地区'
              }
            </View>
          </View>
          <View className="from-item">
            <View className="label">投放地区</View>
            <View className="space"></View>
            <View className="tip" onClick={() => setIsSelecteds(true)}>
              {
                form.province_name ? `${form.province_name}${form.city_name || ''}${form.region_name || ''}` : '请选择投放地区'
              }
            </View>
            <Image src={Next} className='next' />
          </View>

        </View>) : (
          ''
        )}
      {type == 'create' ? (
        <View className="apply-btn" onClick={handlecreate}>确认</View>
      ) : (
          <View className="apply-btn" onClick={handleSubmit}>确认</View>
        )}
      <Agentress isSelected={isSelected} defaultvalue={list} closeItem={closeItem} />
      <Address isSelected={isSelecteds} defaultvalue={list} closeItem={closeItems} />

    </View>
  )
}

Apply.config = {
  navigationBarTitleText: '申领卡',
}

export default Apply;
